<template>
  <el-card>
    <el-row>
      <el-form :inline="true" :model="queryVo" size="default">
        <el-form-item label="角色名称">
          <el-input v-model="queryVo.roleName" placeholder="请输入角色名称" />
        </el-form-item>
        <el-form-item label="权限标识">
          <el-input v-model="queryVo.roleKey" placeholder="请输入权限标识" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryVo.state" placeholder="请选择状态">
            <el-option
                v-for="item in stateOptions"
                :label="item.dictLabel"
                :value="item.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="ok" v-auth="'system-role-list'">查询</el-button>
          <el-button size="small" type="default" @click="resetQuery">重置</el-button>
        </el-form-item>
        <el-form-item/>
      </el-form>
    </el-row>
    <el-row>
      <el-button size="small" type="success" @click="btnAdd" v-auth="'system-role-add'">
        <el-icon>
          <ele-FolderAdd/>
        </el-icon>
        添加
      </el-button>
      <el-button size="small" type="primary" :disabled="select.sign" @click="selectUpdateBtn" v-auth="'system-role-update'">
        <el-icon>
          <ele-EditPen/>
        </el-icon>
        修改
      </el-button>
      <el-popconfirm title="确定删除吗？" @confirm="selectDelete">
        <template #reference>
          <el-button size="small" type="danger" :disabled="select.nodes.length<=0" v-auth="'system-role-delete'">
            <el-icon>
              <ele-Delete/>
            </el-icon>
            删除
          </el-button>
        </template>
      </el-popconfirm>
    </el-row>
    <el-row class="mt10">
      <el-table :data="roleList"
                v-loading="loding"
                @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="roleId" label="编号" align="center"/>
        <el-table-column prop="roleName" label="名称" align="center"/>
        <el-table-column prop="roleKey" label="权限标识" align="center"/>
        <el-table-column prop="roleSort" label="排序" align="center"/>
        <el-table-column label="状态" align="center">
          <template #default="scope">
            <el-tag size="small"
                    v-for="(item,index) in stateOptions"
                    v-show="item.dictValue==scope.row.state"
                    :key="index"
                    :type="item.dictValue=='0'?'success':'warning'" v-text="item.dictLabel"></el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作"  v-auths="['system-role-data-scope-update','system-role-update','system-role-delete']">
          <template #default="scope">
            <el-link type="primary" title="修改" @click="signUpdateBtn(scope.row)" v-auth="'system-role-update'">
              <el-icon>
                <ele-EditPen/>
              </el-icon>
            </el-link>
            <el-popconfirm title="确定删除吗？" @confirm="deleteRows(scope.row)">
              <template #reference>
                <el-link title="删除" type="danger" class="ml10" v-auth="'system-role-delete'">
                  <el-icon>
                    <ele-Delete/>
                  </el-icon>
                </el-link>
              </template>
            </el-popconfirm>

            <el-link class="ml10" title="数据权限" type="warning" @click="dataScopeEdit(scope.row)" v-auth="'system-role-data-scope-update'">
              <el-icon>
                <ele-Lollipop/>
              </el-icon>
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          class="mt15"
          style="justify-content: flex-end;"
          v-model:currentPage="queryVo.current"
          v-model:page-size="queryVo.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          small
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="getList"
          @current-change="getList"
      />
    </el-row>
    <edit-form ref="editFormRef" @ok="ok"/>
    <data-scope ref="dataScopeRef" @ok="ok"></data-scope>
  </el-card>
</template>

<script setup>
import EditForm from './EditForm.vue'
import DataScope from './DataScope.vue'
import {queryList,delByIds} from "/@/api/system/role";
import {ElMessage} from "element-plus";


const {proxy} = getCurrentInstance()
const editFormRef = ref()
const roleList = ref([])
const total = ref(0)
const loding = ref(true)
const select = reactive({
  sign: true,
  nodes: []
})

const queryVo = reactive({
  roleName: undefined,
  roleKey: undefined,
  state: undefined,
  current: 1,
  pageSize: 10
})

const resetQuery=()=>{
  queryVo.roleName=undefined
  queryVo.roleKey=undefined
  queryVo.state=undefined
  ok()
}

const ok = () => {
  getList()
}

const btnAdd = () => {
  editFormRef.value.open()
}

const getList = () => {
  loding.value = true
  queryList(queryVo).then(res => {
    total.value = res.data.pageTotal
    roleList.value = res.data.rows
    loding.value = false
  }).catch(e => {
    loding.value = false
  })
}

// 勾选处罚
const handleSelectionChange = (val) => {
  select.nodes = val
  if (select.nodes.length === 1)
    select.sign = false
  else
    select.sign = true
}

const selectUpdateBtn = () => {
  editFormRef.value.open(select.nodes[0])
}
const selectDelete = () => {
  let arr = select.nodes.map((item)=>{
    return item.roleId
  })
  deleteRoles(arr)
}

const deleteRoles=(arr)=>{
  delByIds(arr).then(res=>{
    ElMessage.success(res.msg)
    ok()
  })
}


const signUpdateBtn = (node) => {
  editFormRef.value.open(node)
}
const deleteRows = (node) => {
  let arr = [node.roleId]
  deleteRoles(arr)
}
const dataScopeRef=ref()
const dataScopeEdit=(node)=>{
  dataScopeRef.value.open(node)
}

// 查询状态字典数据
//状态选项字典
const stateOptions = ref([])
const queryOptions = () => {
  proxy.$dictOptions('sys_common_status').then(res => {
    stateOptions.value = res.data
  })
}

onBeforeMount(() => {
  queryOptions()
  getList()
})
</script>

<style scoped>

</style>
